<style lang="less" scoped>
    p {
        margin: 0.32rem 0 0.23rem;
        font-size: 0.26rem;
        color: #63676a;
        text-align: center;
        &.active {
            /*margin: 0.61rem 0 0.38rem;*/
        }
    }

    .uploadImage {
        li {
            margin-bottom: 0.16rem;
        }
    }

    .dividing {
        padding: 0 0.35rem;
        margin: 0.2rem 0 0.4rem;
        span {
            display: block;
            width: 100%;
            background: #ccc;
            border-bottom: 1px dashed #ccc;
        }
    }

    .tip {
        align-items: flex-start;
        align-content: flex-start;
    }

    .alltext {
        flex: 1;
        display: block;
        font-size: 0.24rem;
        color: #63676a;
        line-height: 1.5;
        margin-bottom: 0.3rem;
    }

    .big_b {
        width: 5rem;
        height: 3.1rem;
    }

    .on_b {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.5rem;
    }

    .uploadImage li .img_b {
        width: 100%;
    }

    .on_b {
        button {
            padding: 0;
            height: 0.8rem;
        }
    }

    ////////////////
    .main {
        margin-bottom: 0.35rem;
        background: #fff;
        .item {
            font-size: 0.28rem;
            color: #ababab;
            padding: 0.38rem 0.32rem 0.38rem;
            background: #fff;
            border-color: #f5f5f5;
            .title {
                font-size: 0.32rem;
                color: #272727;

            }
        }
        .vux-1px-b{
            height: 1rem;
            line-height: 1rem;
        }

        input {
            background: transparent;
            font-size: 0.37rem;
            color: #222;
            &:last-child {
                border-bottom: 0;
            }

        }
    }
</style>
<template>
    <div>
        <v-header title="营业执照" type="/my/business">
            <div slot="left">
                <div class="backs_icon"></div>
            </div>
        </v-header>
        <div class="main_allScroll" :style="{top:interactive.statusBarHeight.height}">
            <tab style="border-top: 1px solid #ebebeb" v-model="indexShow">
                <tab-item class="vux-center" :selected="indexShow === index"
                          v-for="(item, index) in ($route.query.merchantId ? list : list2)"
                          @click="indexShow = index" :key="index" style="font-size: 0.32rem;
        ">{{item}}
                </tab-item>
            </tab>
            <swiper v-model="indexShow" height="11.5rem" :show-dots="false">
                <swiper-item v-for="(item, index) in ($route.query.merchantId ?list:list2)" :key="index">
                    <div class="tab-swiper vux-center">
                        <div v-if="index == 0 && !$route.query.merchantId">
                            <p class="active">
                            <div class="main">
                            <div class="item vux-1px-b">
                                <div class="title">企业名称</div>
                                <input type="text" class="enter" placeholder="输入企业名称" v-model="date.enterpriseName">
                            </div>
                            <div class="item vux-1px-b">
                                <div class="title">企业代码</div>
                                <input type="text" class="enter" placeholder="输入企业代码" v-model="date.enterpriseCode">
                            </div>
                            </div>
                            <p>请上传营业执照正面</p>
                            </p>
                            <ul class="uploadImage" style="justify-content: center">
                                <li class="big_b"
                                    v-on:click="$route.query.merchantId && authState ?'':pushImg('licenseImg')">
                                    <div v-if="$route.query.merchantId?licenseImg:date.licenseImg.imageUrl"
                                         class="box_s">
                                        <img v-lazy="{src:$route.query.merchantId && isRenzhengOpen?licenseImg:date.licenseImg.prefix +  date.licenseImg.imageUrl,loading:photographLoadImg,error:photographLoadImg}"
                                             alt="">
                                        <div v-show="!isMerchant && !isRenzhengOpen" class="img_b">重新上传</div>
                                    </div>
                                    <div class="box" v-else>
                                        <div class="camera_s_icon"></div>
                                        <span class="text">上传营业执照正面</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="tip" style="justify-content: center">
                                <div class="warning_icon"></div>
                                <span>请填写您的真实信息，通过后不能修改!</span>
                            </div>
                            <div class="on_b">
                                <button class="btns buttonBR" v-on:click="applyMerchant" :disabled="disabled" :class="disabled ? 'disabled': ''">
                                    <span>认证</span>
                                </button>
                            </div>
                        </div>
                        <div v-else>
                            <p>如营业执照正在办理，请上传营业场所证明</p>
                            <ul class="uploadImage">
                                <li v-for="(v, i) in 6" v-on:click="pushImg('businessProveImg')">
                                    <div v-if="date.businessProveImg != null && date.businessProveImg[i]" class="box_s">
                                        <img v-lazy="{src:date.businessProveImg[i].prefix + date.businessProveImg[i].imageUrl,loading:photographLoadImg,error:photographLoadImg}"
                                             alt="">
                                        <div class="img_b">重新上传</div>
                                    </div>
                                    <div v-else class="box">
                                        <div class="camera_s_icon"></div>
                                        <span class="text">上传营业场所证明</span>
                                    </div>
                                </li>
                            </ul>
                            <div class="dividing">
                                <span class="dividing"></span>
                            </div>
                            <div class="tip">
                                <div class="warning_icon" style="margin-top: -0.1rem;"></div>
                                <span class="alltext" style="color:#999999;">1.提供租房合同/房产证/购房合同等任意证明<br>2.上传原件照片,每张都需要拍摄,可传多张图片(最多6张)<br>3.需包含门店地址、有效期签字盖章页,租赁人/房产所有人/购房合同签署人需与经营者一致</span>
                            </div>
                            <div class="on_b">
                                <button class="btns buttonBR" :class="disabledTwo" :disabled="disabledTwo !== ''"
                                        v-on:click="saveMerchant">
                                    <span>申请</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </swiper-item>
            </swiper>
        </div>


    </div>
</template>
<script>
    import {Tab, TabItem, Sticky, Divider, XButton, Swiper, SwiperItem} from 'vux'
    import {mapActions, mapState} from 'vuex'
    import {PUSH_BUSINESS, UPDATE_UPDATELIST, SET_STORE} from 'store/business'
    import {UPDATA_INTERACTIVE} from 'store/interactive'

    export default {
        components: {
            Tab,
            TabItem,
            Sticky,
            Divider,
            XButton,
            Swiper,
            SwiperItem
        },
        data() {
            return {
                btn: false,  //true 点击申请 false 未点击
                isMerchant: false,  //true 点击申请 false 未点击
                disabled: "disabled",
                disabledTwo: "disabled",
                list: ['正在办理'],
                list2: ['有营业执照', '正在办理'],
                indexShow: 0,
                img1: '',
                img2: '',
                img3: '',
                img4: '',
                img5: '',
                img6: '',
                isRenzhengOpen: false,
                licenseImg: {},
                authState: true,
                date: {
                    enterpriseCode: "",
                    enterpriseName: "",
                    licenseStatus: 1,
                    businessProveImg: [],
                    licenseImg: {11: 1},
                    validDate: '',
                },
                ImgClick: '',
                photographLoadImg: require('../../assets/img/photograph_loadImg.png')
            };
        },
        activated: function () {
            this.init();
            //  if(query.MerchantId)  认证失败
            if (this.$route.query.merchantId) {
                this.date.merchantId = this.$route.query.merchantId;
                //`获取商家详情
                this.queryMerchantInfo();
            } else {
            }

        },
        methods: {
            ...mapActions([PUSH_BUSINESS, UPDATA_INTERACTIVE, UPDATE_UPDATELIST, SET_STORE]),
            init() {
                this.btn = false;  //true 点击申请 false 未点击
                this.isMerchant = false;  //true 点击申请 false 未点击
                this.disabled = "disabled";
                this.disabledTwo = "disabled";
                // this.indexShow = 0;
                this.img1 = '';
                this.img2 = '';
                this.img3 = '';
                this.img4 = '';
                this.img5 = '';
                this.img6 = '';
                this.isRenzhengOpen = false  //是否是认证开始
                    this.licenseImg = {};
                this.authState = true;
                this.date = {
                    enterpriseCode: "",
                    enterpriseName: "",
                    licenseStatus: 1,
                    businessProveImg: [],
                    licenseImg: {},
                    validDate: '',
                    merchantId: ''
                };
                this.ImgClick = ''
            },
            //获取失败商家详情
            queryMerchantInfo() {
                let that = this;
                this.$ajax.business.queryMerchantInfoVO({
                    merchantId: this.$route.query.merchantId
                })
                    .then(res => {
                        let img = this.handleImg(JSON.parse(JSON.stringify(res.body.content.businessProveImg)))
                        if(res.body.content.licenseStatus == 1){  // 有营业执照
                            this.$router.replace({
                                path: "/my/business/addBusiness", query: {
                                    merchantId: this.date.merchantId,
                                    licenseStatus: 1,

                                }
                            })
                        } else {
                            this.businessProveImg = img
                            console.log(img)
                        }
                        this.date.licenseStatus = res.body.content.licenseStatus
                        this.date.businessProveImg = img
                        this.SET_STORE({businessProveImg: img})
                        this.SET_STORE(res.body.content.merchantDetailInfo)
                    })
            },
            handleImg(data){
                var arr = []
                data.split(',').forEach((v)=>{
                    let imgArr = v.split('images/')
                    arr.push({prefix: imgArr[0], imageUrl: 'images/' + imgArr[1]})
                })
                return arr
            },
            // 4.商户申请（有营业执照）
            applyMerchant() {
                let that = this
                let obj = {};
                obj = JSON.parse(JSON.stringify(this.date));
                obj.licenseImg = this.comJS.pushImg(this.date.licenseImg);
                this.UPDATE_UPDATELIST(true);
                this.$ajax.business.applyMerchant(obj)
                    .then((res) => {
                        return res.body.content
                    })
                    .then(res => {
                        this.authMerchantInfo(res)
                    })
            },
            //  商户认证
            authMerchantInfo(merchantId){
                let that = this
                this.$ajax.business.authMerchantInfo({merchantId: merchantId})
                    .then(res=>{
                        that.$vux.confirm.show({
                            title: '系统提示',
                            content: '认证成功！请完善门店信息',
                            onConfirm(){
                                that.$router.replace({
                                    path: "/my/business/addBusiness", query: {
                                        merchantId: merchantId,
                                        licenseStatus: 1,

                                    }
                                })
                            },
                            onCancel(){
                                that.$router.goBack()
                            }
                        })
                    })
            },
            // 5.商户申请（无营业执照）
            saveMerchant() {
                let str = '';
                let that = this
                if (this.date.businessProveImg != null) {
                    this.date.businessProveImg.forEach(function (v, i) {
                        str += v.imageUrl
                        if (i !== that.date.businessProveImg.length - 1) {
                            str += ','
                        }
                    })
                }
                this.SET_STORE({businessProveImg: str})
                this.$router.replace({
                    path: "/my/business/addBusiness", query: {
                        licenseStatus: 2,
                        merchantId: this.date.merchantId,
                        error: this.$route.query.merchantId ? 'error' : null,

                    }
                })
            },
            checkDisable(){
                if (this.date.enterpriseName.trim() && this.date.enterpriseCode.trim() && this.date.licenseImg.imageUrl) {
                    this.disabled = false
                } else {
                    this.disabled = true
                }
            },
            pushImg(data) {
                if (this.isMerchant) {
                    return;
                }
                this.ImgClick = data;

                let str = "3";
                if (data == "businessProveImg") {
                    str = "2"
                }
                this.Interactive.uploadPictures(str);
            },
            pushImgSucc(data) {
                if (this.ImgClick == 'businessProveImg') {
                    this.date.businessProveImg.push(data);
                } else {
                    this.isRenzhengOpen = false
                    this.date.licenseImg = data
                }
                this.UPDATA_INTERACTIVE({url: ''})
            },
        },
        watch: {
            indexShow: function () {
                // this.date.licenseStatus = this.indexShow + 1;
                if (this.indexShow == 0 && this.date.licenseImg.imageUrl) {
                    this.disabled = '';
                } else {
                    this.disabled = 'disabled';
                }
                if ((this.indexShow == 1 && this.date.businessProveImg.length > 0) || (this.indexShow == 0 && this.$route.query.merchantId && this.date.businessProveImg.length > 0)) {
                    this.disabledTwo = '';
                } else {
                    this.disabledTwo = 'disabled';
                }
            },
            'date.enterpriseName': 'checkDisable',
            'date.enterpriseCode': 'checkDisable',
            'date.licenseImg': 'checkDisable',
            'date.businessProveImg': function () {
                if ((this.indexShow == 1 && this.date.businessProveImg.length > 0) || (this.indexShow == 0 && this.$route.query.merchantId && this.date.businessProveImg.length > 0)) {
                    this.disabledTwo = '';
                } else {
                    this.disabledTwo = 'disabled';
                }
            },
            "interactive.image": function () {
                if (this.interactive.image.url) {
                    this.pushImgSucc(this.interactive.image.url);
                }
                ;
            }
        },
        deactivated: function () {
            if (this.btn == true || this.isMerchant == true) {
                window.localStorage.removeItem("addBusiness");
            } else if ((!this.btn == true || !this.isMerchant == true || this.authState) && !this.isRenzhengOpen) {
                window.localStorage.setItem('addBusiness', JSON.stringify(this.date));
            }
        },
        computed: mapState({interactive: state => state.interactive, business: state => state.business}),


    }
</script>